/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-26 13:10:22
 */
import React, { useState, useEffect } from "react";
import { Modal, Form, Button, Input,  message, Space, Tooltip } from "antd";
import { QuestionCircleFilled } from "@ant-design/icons";
import cmdbres from "@/data/cmdbres";
import request from "@/utils/request";
import regexpUtil from "@/utils/regexpUtil";
import hcpUtils from "@/utils/hcpUtils";

const user = hcpUtils.getUser();
const { commonNameRegexp, commonCodeRegexp } = regexpUtil;
const CreateFieldGroup = ({moduleId, info, title, visible, setVisible, onCreateFinish})  => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);

	const onFinish = async (values) => {
		setLoading(true);
		let url = cmdbres.createModulePropertyGroup;
		let params = {
			...values,
			propertyGroupIndex:1,
			cmModuleId:moduleId,
			collapseSwitch: false,
			author: user.staffName
		}

		if(info && info.id) {//修改
			url = cmdbres.updateModulePropertyGroup;
			params = {
				id: info.id,
				propertyGroupName: values.propertyGroupName,
				propertyGroupIndex: 1,
				collapseSwitch: false,
				author: user.staffName
			} 
		}
		let res = await request({
			...url,
			data: params
		});
		setLoading(false);
		if (res && res.code == 200) {
			setVisible(false);
			message.success("保存成功");
			if (typeof onCreateFinish == "function") onCreateFinish(res);
		} else {
			if(res) message.error(res.msg);
		}
	};

	const onCancel = () => {
		setVisible(false);
	}

	return (
		<Modal
			title={title}
			className="hcp-modal-sm"
			visible={visible}
			footer={null}
			onCancel={onCancel}
			destroyOnClose
			maskClosable={false}
			afterClose={()=>{form.resetFields()}}
		>
			<Form
				form={form}
				labelCol={{ span: 5 }}
				wrapperCol={{ span: 18 }}
				name="basic"
				onFinish={onFinish}
			>
				<Form.Item 
					label="分组名称"
					name="propertyGroupName" 
					initialValue={info?.propertyGroupName}
					rules={[
						{required: true,message: '请输入名称'},
						{
							pattern: `^[\\u4e00-\\u9fa5]{${1},${20}}$`,
    						message:`分类名称不能为空,只允许包含1-20位中文`
						}
					]}
				>
					<Input placeholder="请输入名称" maxLength={20}/>
				</Form.Item>
				<Form.Item
					label="唯一标识" 
					name="propertyGroup"
					rules={[
						{required: true,message: '请输入唯一标识'},
						commonCodeRegexp(1,100)
					]}
					initialValue={info?.propertyGroup}
					>
					<Input placeholder="请输入唯一标识" maxLength={100} disabled={info && info.cmModuleId}/>
				</Form.Item>
				<div className="hcp-modal-body-footer">
					<Form.Item wrapperCol={{ span: 24 }} >
						<Button onClick={onCancel}>取消</Button>
						<Button type="primary" htmlType="submit" loading={loading}>确认</Button>
					</Form.Item>
				</div>
			</Form>
		</Modal>
	)
}

export default CreateFieldGroup;
